<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>MobileShop</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/font-awesome.min.css">
    <link href="style.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="topbar">
      <div class="container">
        <ul class="listtop list-inline pull-right">
          <li><a href="#">Đăng nhập</a></li>
          <li><a href="#">Hổ trợ</a></li>
          <li><a href="#">Kiểm tra đơn hàng</a></li>
          <li><a href="#"><img src="images/vietnam.png" alt="vietnamese"></a></li>
        </ul>
      </div><!-- /container -->
    </div>
    <!--End topbar-->

    <header>
      <div class="container">
        <div class="row">
          <div class="col-md-3">
            <div class="logo">
              <h1><a href="#"><img src="images/logo.png" alt="Logo Moblie Shop"></a></h1>
            </div>
          </div>

          <div class="col-md-9">
            <ul class="listheader list-inline pull-right">
              <li><span>Thanh Toán khi<br>nhận hàng</span></li>
              <li><span>Giao hàng<br>Toàn Quốc</span></li>
              <li><span>Trả hàng<br>trong 30 ngày</span></li>
              <li><span>HOTLINE<br>0917 999 911</span></li>
            </ul>
          </div>
        </div><!-- /row -->
      </div><!-- /container -->
    </header>
    <!--End header-->

    <nav>
      <div class="container">
        <div class="row">
            <div class="col-md-3">
              <div class="catolory"><i class="glyphicon glyphicon-th-large"></i><span>category</span><i class="fa fa-chevron-down"></i></div>
            </div>

            <div class="col-md-6">
              <form action="" id="searchform" method="get" role="search">
                <div class="pgl-search">
                  <input type="text" id="s" name="s" value="" class="form-control" placeholder="Tìm kiếm sản phẩm" >
                  <input type="submit" value="Search" id="searchsubmit">
                  <i class="glyphicon glyphicon-search"></i>
                </div>
              </form>
            </div>
            
            <div class="col-md-3">
              <div class="giohang pull-right">
                <i class="fa fa-shopping-cart"></i><span>Giỏ hàng</span><span class="soluonghang">0</span>
              </div>
            </div>
        </div><!-- /row -->
      </div><!-- /container -->
    </nav>
    <!--End nav-->

    <div class="pageContent">
      <div class="container">
        <div class="row">
          <div class="section cacbuoc">
            <div class="headerSection">
              <h3 class="title">CÁC BƯỚC MUA HÀNG</h3>
            </div>

            <div class="contentSection">
              <ul class="listcacbuoc">
                <li><img src="images/" alt="img"><a href="#">Tìm sản phẩm</a></li>
                <li><img src="images/" alt="img"><a href="#">Chọn mua</a></li>
                <li><img src="images/" alt="img"><a href="#">Thanh toán</a></li>
                <li><img src="images/" alt="img"><a href="#">Xác nhận</a></li>
                <li><img src="images/" alt="img"><a href="#">Nhận hàng</a></li>
              </ul>
            </div>
          </div><!-- /cacbuocmuahang -->
        </div><!-- /row -->
      </div><!-- /container -->
    </div>
    <!--End pageContent-->

    <footer>
      <div class="footer-top">
        <div class="container">
          <div class="row">
            <div class="col-md-5">
              <div class="email-khuyenmai">
                <div class="input-group">
                  <input type="text" class="form-control input-lg" placeholder="Nhập email nhận thông tin khuyến mãi">
                  <span class="input-group-btn">
                    <input type="submit" value="Subscribe" class="btn btn-primary btn-lg">
                  </span>
                </div>
              </div>
            </div>

            <div class="col-md-3">
              <div class="postalcode email-khuyenmai">
                <!-- <select multiplec lass="form-control">
                  <option>1</option>
                  <option>2</option>
                  <option>3</option>
                  <option>4</option>
                  <option>5</option>
                </select> -->
                <div class="input-group">
                    <input type="text" class="form-control input-lg" placeholder="Postal Code or City, Province">
                    <span class="input-group-btn">
                      <input type="submit" value="Sub" class="btn btn-primary btn-lg">
                    </span>
                </div>
              </div>
            </div>

            <div class="col-md-4">
              <ul class="listthanhtoan list-inline pull-left">
                <li><span>Chấp nhận thanh toán qua:</span></li>
                <li><a href="#"><img src="images/visa.png" alt="visa"></a></li>
                <li><a href="#"><img src="images/master.png" alt="master"></a></li>
              </ul>
            </div>
          </div><!-- /row -->
        </div><!-- /container -->
      </div><!-- /footer-top -->
      <div class="footer-content">
        <div class="container">
          <div class="row">
            <div class="col-md-3 col-sm-6">
              <ul class="listmid listmid1">
                <li><a href="#">Giới thiệu về chúng tôi</a></li>
                <li><a href="#">Dịch vụ</a></li>
                <li><a href="#">Liên hệ</a></li>
                <li><a href="#">Cẩm nang mua sắm</a></li>
              </ul><!-- /listmid1 -->
            </div>

            <div class="col-md-3 col-sm-6">
              <ul class="listmid listmid2">
                <li><a href="#">My Account</a></li>
                <li><a href="#">Cách thức thanh toán</a></li>
                <li><a href="#">Hướng dẫn đặt hàng</a></li>
                <li><a href="#">Chính sách trao đổi trả hàng</a></li>
                <li><a href="#">Trung tâm bảo hành</a></li>
              </ul><!-- /listmid2 -->
            </div>

            <div class="col-md-3 col-sm-6">
              <ul class="listmid listmid3">
                <li><a href="#">Tằng cường SELL OFF</a></li>
                <li><a href="#">Khuyến mãi hàng loạt</a></li>
                <li><a href="#">Sản phẩm 1 được Khuyến mãi</a></li>
                <li><a href="#">Hỏi đáp ?</a></li>
              </ul><!-- /listmid3 -->
            </div>

            <div class="col-md-3 col-sm-6">
              <ul class="listmid listmid4">
                <li><a href="#">Hướng dẫn mua hàng</a></li>
                <li><a href="#">Các sản phẩm mới nhất</a></li>
                <li><a href="#">Các sản phẩm được yêu thích</a></li>
                <li><a href="#">Tôi không đặt đơn đặt hàng?</a></li>
              </ul><!-- /listmid4 -->
            </div>
          </div><!-- /row -->
        </div><!-- /container -->
      </div><!-- /footer-content -->

      <div class="footer-bottom">
        <div class="container">
          <div class="pull-left">
            <ul class="menubottom list-inline">
              <li class="active"><a href="#">Trang chủ</a></li>
              <li><a href="#">Liên hệ</a></li>
            </ul>
          </div>

          <div class="pull-right">
            <ul class="social list-inline">
              <li>
                <a title="" data-placement="top" data-toggle="tooltip" href="#" data-original-title="Twitter"><img src="images/tw.png" alt="social"></a>
              </li>
              <li>
                <a title="" data-placement="top" data-toggle="tooltip" href="#" data-original-title="Google Plus"><img src="images/gg.png" alt="social"></a>
              </li>
              <li>
                <a title="" data-placement="top" data-toggle="tooltip" href="#" data-original-title="Youtube"><img src="images/youtube.png" alt="social"></a>
              </li>
              <li>
                <a title="" data-placement="top" data-toggle="tooltip" href="#" data-original-title="Facebook"><img src="images/fb.png" alt="social"></a>
              </li>
            </ul>
          </div>
        </div><!-- /container -->
      </div><!-- /footer-bottom -->

      <div class="copyright">
        <div class="container">
          <div class="row">
            <p class="text-center">Copyright &copy; 2015, Inc,All right reserved</p>
          </div><!-- /row -->
        </div><!-- /container -->
      </div><!-- /copyright -->
    </footer>
    <!--End footer-->



    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="js/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>